<template>
  <div class="flex justify-between h-screen w-full">
    <div
      class="w-[300px] min-w-[300px] flex-shrink-0 h-full bg-gray-200 border-r border-gray-300 relative"
    >
      <div class="h-[95%] overflow-y-auto">
        <ConversationList :items="converSationStore.conversationList" />
      </div>
      <div
        class="absolute bottom-0 left-0 flex w-full text-white font-bold h-[5%] bg-gray-200 p-2 gap-2 mb-2"
      >
        <Button class="flex-1" @click="router.push('/')">
          <template #icon>
            <Icon icon="radix-icons:chat-bubble" class="mr-2 text-sm"></Icon>
          </template>
          新建聊天
        </Button>
        <Button color="green" class="flex-1" @click="router.push('/setting')">
          <template #icon>
            <Icon icon="radix-icons:gear" class="mr-2 text-sm"></Icon>
          </template>
          应用配置
        </Button>
      </div>
    </div>
    <div class="flex-1 h-full overflow-hidden">
      <div class="h-full mx-auto">
        <RouterView />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import ConversationList from './components/ConversationList.vue'
  import { RouterView, useRouter } from 'vue-router'
  import { initProviders } from './db'
  import Button from './components/Button.vue'
  import { onMounted } from 'vue'
  import useConversationStore from './store/modules/converstaionStore'
  // 修改这里，移除 Toast 导入
  // import { Toast } from 'radix-vue'

  const router = useRouter()
  const converSationStore = useConversationStore()
  const initProvider = async () => {
    await initProviders()
  }
  onMounted(() => {
    initProvider()
    converSationStore.getConversationList()
  })
</script>

<style scoped></style>
